<template>
  <section class="ProjectDetail__container">
    <quick-panel title="基本信息">
      <quick-action-bar slot="subtitle">
        <quick-icon-button icon="icon-shuaxin" tooltip="刷新" @click="refresh" />
      </quick-action-bar>
      <div class="projectDetail">
        <div class="info">
          <h1>
            {{ project.name }}&nbsp;<span class="no">{{ project.no }}</span>
          </h1>
          <h2>
            <quick-tag-plain label="负责人" :value="project.leader_name" type="green-4" />
            <quick-tag-plain label="渠道" :value="project.channel_name" type="yellow" />
            <quick-tag-plain label="客户" :value="project.customer_name" type="blue-2" />
            <quick-tag-plain label="状态" :value="project.status_name" type="yellow-2" />
          </h2>
          <p class="grade">
            <quick-tag :value="project.stage_name" type="primary" />
          </p>
          <div class="real">
            <span class="progress">
              <span class="itme_progress">进度</span>
              <span><el-progress :percentage="project.progress ? +project.progress : 0"
                  :stroke-width="2"></el-progress></span>
            </span>
            <span class="progress">
              <span class="itme_progress">总进度</span>
              <span><el-progress :percentage="project.total_progress ? +project.total_progress : 0
                " :stroke-width="2"></el-progress></span>
            </span>
          </div>

          <p>
            {{ project.remark }}
          </p>

          <div class="footer">
            <p class="desc">
              <span>{{ project.creator_name }}</span> 创建于
              <span>{{ project.create_date }}</span>
            </p>
            <p class="desc">
              <span>{{ project.editor_name }}</span> 修改于
              <span>{{ project.edit_date }}</span>
            </p>
          </div>
        </div>
        <div class="detailStatic" ref="detailStatic"></div>
      </div>
    </quick-panel>
    <quick-panel title="模块列表">
      <quick-action-bar slot="subtitle">
        <quick-icon-button icon="icon-icon_xinzeng" tooltip="新增" @click="addModule" />
      </quick-action-bar>
      <quick-card-list :items="modules">
        <template slot-scope="scope">
          <project-module-card :item="scope.item" :noAction="false">
            <div class="action-bar" slot-scope="scope">
              <quick-action-bar>
                <quick-icon-button icon="icon-xiugai" tooltip="编辑" @click="editModule(scope.item)" />
                <quick-icon-button icon="icon-shanchu" tooltip="删除" @click="deleteProJectModule(scope.item.id)" />
              </quick-action-bar>
            </div>
          </project-module-card>
        </template>
      </quick-card-list>
    </quick-panel>
    <quick-panel title="需求列表">
      <quick-action-bar slot="subtitle">
        <quick-icon-button icon="icon-icon_xinzeng" tooltip="新增" @click="addDemand" />
      </quick-action-bar>
      <quick-card-list :items="demands">
        <template slot-scope="scope">
          <project-demand-card :item="scope.item" :noAction="false">
            <div class="action-bar" slot-scope="scope">
              <quick-action-bar>
                <quick-icon-button icon="icon-xiugai" tooltip="编辑" @click="editDemand(scope.item)" />
                <quick-icon-button icon="icon-shanchu" tooltip="删除" @click="deleteProJectDemand(scope.item.id)" />
              </quick-action-bar>
            </div>
          </project-demand-card>
        </template>
      </quick-card-list>
    </quick-panel>
    <quick-panel title="任务列表">
      <quick-action-bar slot="subtitle">
        <quick-icon-button icon="icon-icon_xinzeng" tooltip="新增" @click="addJob()" />
      </quick-action-bar>
      <quick-card-list :items="jobs">
        <template slot-scope="scope">
          <project-job-card :item="scope.item" :noAction="false">
            <div class="action-bar" slot-scope="scope">
              <quick-action-bar>
                <quick-icon-button icon="icon-xiugai" tooltip="编辑" v-if="
                  scope.item.status != 1 &&
                  scope.item.status !== 2 &&
                  scope.item.status != 3 &&
                  scope.item.status != 4
                " @click="showEditDialog(scope.item)" />
                <quick-icon-button icon="icon-shanchu" tooltip="删除" v-if="
                  scope.item.status != 1 &&
                  scope.item.status !== 2 &&
                  scope.item.status != 3 &&
                  scope.item.status != 4
                " @click="deleteProJectJob(scope.item.id)" />
              </quick-action-bar>
            </div>
            <template slot="reportEvent">
              <span @click="reportListEvent(scope.item)">{{
                scope.item.name
              }}</span>
            </template>
          </project-job-card>
        </template>
      </quick-card-list>
    </quick-panel>

    <!-- <operating-platform></operating-platform> -->
    <project-module-add ref="ProjectModuleAddDialog" @added="refresh" />
    <project-module-edit ref="ProjectModuleEditDialog" @edited="refresh" />
    <project-demand-add ref="ProjectDemandAddDialog" @added="refresh" />
    <project-demand-edit ref="ProjectDemandEditDialog" @edited="refresh" />
    <project-job-add ref="ProjectJobAddDialog" @added="refresh" />
    <project-job-edit ref="ProjectJobEditDialog" @edited="refresh" />
    <!-- <project-job-report-list
      ref="ProjectJobReportListDialog"
      @reportedList="refresh"
    /> -->
    <project-job-report-detail ref="ProjectJobReportDetail"></project-job-report-detail>
  </section>
</template>

<script>
import _api from "../../common/api/project";
import _api_job from "../../common/api/project_job";
import _api_module from "../../common/api/project_module";
import _api_demand from "../../common/api/project_demand";
import * as echarts from "echarts";
import ProjectEditPrity from "@/views/Project/ProjectEditPrity.vue";
import ProjectModuleAdd from "../ProjectModule/ProjectModuleAdd";
import ProjectModuleEdit from "../ProjectModule/ProjectModuleEdit.vue";
import ProjectDemandAdd from "../ProjectDemand/ProjectDemandAdd.vue";
import ProjectDemandEdit from "../ProjectDemand/ProjectDemandEdit.vue";
import ProjectJobAdd from "../ProjectJob/ProjectJobAdd.vue";
import ProjectJobEdit from "../ProjectJob/ProjectJobEdit.vue";
import ProjectModuleCard from "../ProjectModule/ProjectModuleCard.vue";
import ProjectDemandCard from "../ProjectDemand/ProjectDemandCard";
import ProjectJobCard from "../ProjectJob/ProjectJobCard";
import OperatingPlatform from "../OperatingPlatform/OperatingPlatformIndex.vue";
import ProjectJobReportDetail from "../ProjectJob/ProjectJobReportDetail";
export default {
  components: {
    ProjectEditPrity,
    ProjectModuleAdd,
    ProjectModuleEdit,
    ProjectDemandAdd,
    ProjectDemandEdit,
    ProjectJobAdd,
    ProjectJobEdit,
    ProjectModuleCard,
    ProjectDemandCard,
    ProjectJobCard,
    OperatingPlatform,
    ProjectJobReportDetail,
  },
  props: {
    project_id: {
      required: true,
      type: Number | String,
    },
  },
  data() {
    return {
      jobs: [],
      modules: [],
      demands: [],
      project: {},
      modulesOption: [],
      demandsOption: [],
      data: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      modulesCount: "",
      demandsCount: "",
      jobsCount: "",
      project_job: [], //任务
      jobLoading: false,
      showAdd: false,
      type: "",
      node_data: "",
    };
  },

  methods: {
    async getProject() {
      try {
        const result = await _api.getListAsync({
          ids: this.project_id,
        });
        this.project = result.data[0];
      } catch { }
    },

    async getJobs() {
      try {
        const result = await _api_job.getListAsync({
          project_id: this.project_id,
        });
        this.jobs = result.data;
        this.jobsCount = result.data.length;
      } catch { }
      this.detailStatic();
    },

    async getModules() {
      try {
        const result = await _api_module.getListAsync({
          project_id: this.project_id,
        });
        this.modules = result.data;
        this.modulesCount = result.data.length;
        this.modulesOption = this.modules.map((item) => {
          return {
            value: item.id,
            label: item.name,
          };
        });
      } catch { }
      this.detailStatic();
    },

    async getDemand() {
      try {
        const result = await _api_demand.getListAsync({
          project_id: this.project_id,
        });
        this.demands = result.data;
        this.demandsCount = result.data.length;
        this.demandsOption = this.demands.map((item) => {
          return {
            value: item.id,
            label: item.name,
          };
        });
      } catch { }
      this.detailStatic();
    },

    addModule() {
      this.$refs.ProjectModuleAddDialog.showDialog(this.project_id);
    },

    addDemand() {
      this.$refs.ProjectDemandAddDialog.showDialog(
        this.project_id,
        this.modulesOption
      );
    },

    addJob() {
      this.$refs.ProjectJobAddDialog.showDialog(
        this.project_id,
        this.demandsOption
      );
    },

    refresh() {
      this.getModules();
      this.getDemand();
      this.getJobs();
    },
    showEditDialog(scope) {
      this.$refs.ProjectJobEditDialog.showDialog(scope, this.demandsOption);
    },

    editModule(scope) {
      this.$refs.ProjectModuleEditDialog.showDialog(scope);
    },

    editDemand(scope) {
      this.$refs.ProjectDemandEditDialog.showDialog(scope, this.modulesOption);
    },

    deleteForProject(scoped) {
      if (scoped.type == "project_module") {
        this.deleteProJectModule(scoped.project_module_id);
      }

      if (scoped.type == "project_demand") {
        this.deleteProJectDemand(scoped.project_demand_id);
      }
    },

    deleteProJectModule(id) {
      this.$confirm("你确定删除此项吗？", "确认删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            await _api_module.deleteAsync(id);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.refresh();
          } catch (error) {
            this.$message({
              type: "info",
              message: `删除失败，${error}`,
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    deleteProJectDemand(id) {
      this.$confirm("你确定删除此项吗？", "确认删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            await _api_demand.deleteAsync(id);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.refresh();
          } catch (error) {
            this.$message({
              type: "info",
              message: `删除失败，${error}`,
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    deleteProJectJob(id) {
      this.$confirm("你确定删除此项吗？", "确认删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            await _api_job.deleteAsync(id);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.refresh();
          } catch (error) {
            this.$message({
              type: "info",
              message: `删除失败，${error}`,
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    reportProJectJob(row) {
      this.$refs.ProjectJobReportListDialog.showDrawer(row);
    },

    showCancekDialog(row) {
      if (row.status == 4) {
        return this.$message.info("任务已取消");
      }
      if (row.status == 3) {
        return this.$message.success("任务已完成");
      }
      this.$refs.ProjectJobCancelDialog.showDialog(row);
    },

    showPauseDialog(row) {
      if (row.status == 3) {
        return this.$message.success("任务已完成");
      }
      if (row.status == 2) {
        return this.$message.info("任务已暂停");
      }
      if (row.status == 4) {
        return this.$message.info("任务已取消");
      }
      this.$refs.ProjectJobPauseDialog.showDialog(row);
    },

    showCompleteDialog(row) {
      if (row.status == 3) {
        return this.$message.success("任务已完成");
      }
      if (row.status == 4) {
        return this.$message.info("任务已取消");
      }
      this.$refs.ProjectJobCompleteDialog.showDialog(row);
    },

    reportListEvent(item) {
      this.$refs.ProjectJobReportDetail.showDrawer(item);
    },

    detailStatic() {
      var chartDom = this.$refs.detailStatic;
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "项目统计",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 14,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: this.modulesCount, name: "模块" },
              { value: this.demandsCount, name: "需求" },
              { value: this.jobsCount, name: "任务" },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
  async mounted() {
    await this.getProject();
    await this.getModules();
    await this.getDemand();
    await this.getJobs();
    await this.detailStatic();
  },
};
</script>

<style lang="scss" scoped>
.project-detail {
  font-size: 1rem;
  color: #c4c4c4;
  height: 100%;
  border: 1px red;
  display: flex;
}

.left {
  // border: 1px solid red;
  height: 100%;
  width: 30%;
  padding: 10px;
  box-sizing: border-box;
  margin: 5px;

  .addButton {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
}

.right {
  // border: 1px solid blue;
  height: 100%;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  margin: 5px;
}

.info {
  line-height: 1.5;

  h1 {
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 2.5;

    .no {
      color: #666;
    }
  }

  h2 {
    margin: 5px 0;
  }

  .semester {
    font-size: 1.2rem;
    height: 24px;
    line-height: 24px;
    margin: 5px 0;

    // span {
    //   @include tag2(#67c23a);
    // }
  }

  .grade {
    font-size: 1.2rem;
    height: 24px;
    line-height: 24px;
    margin: 5px 0;

    .real {
      width: 100px;
    }

    span {
      // @include tag2(#409eff);
    }
  }

  .footer {
    margin-top: 20px;

    .desc {
      font-size: 1.3rem;
      color: #666;
      font-weight: bold;

      span {
        font-size: 1.2rem;
        font-weight: 400;
        color: #999;
      }
    }
  }
}

.progress {
  display: flex;
  align-items: flex-end;
  font-weight: 600;
  font-size: 1.2rem;

  .itme_progress {
    width: 40px;
  }

  .el-progress {
    width: 500px;
  }
}

.detailStatic {
  width: 300px;
  height: 300px;
  // border: 1px solid red;
}

.projectDetail {
  display: flex;
  // justify-content: space-between;
}
</style>